<template >
    <!-- 模态框 -->
  <div  id="editTask"  v-if="isEdit">
    <div class="modal show" aria-modal="true" style="display: block" >
      <div class="modal-dialog modal-lg" >
        <div class="modal-content">
          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">修改【{{task.name}}】</h4>
            <button type="button" class="btn-close" @click="hideDialog"></button>
          </div>
          <!-- 模态框内容 -->
          <div class="modal-body text-start">
            <div class="input-group mb-3">
              <span class="input-group-text">定时器名称</span>
              <input type="text" class="form-control" v-model="task.name"  name="name" readonly>
            </div>
            <div class="input-group mb-3 mt-2">
              <span class="input-group-text">描述说明&nbsp;&nbsp;&nbsp;&nbsp; </span>
              <input type="text" class="form-control" v-model="task.desc"  name="desc" readonly>
            </div>
            <div class="input-group mb-3 mt-2">
              <span class="input-group-text">触发器名称</span>
              <input type="text" class="form-control" v-model="task.trigger"  name="trigger" readonly>
            </div>
            <div class="input-group mb-3 mt-2 cron">
              <span class="input-group-text">cron表达式</span>
              <el-popover v-model="cronPopover" class="form-control" style="padding: 0">
                <cron @change="changeCron" @close="cronPopover=false" i18n="cn"></cron>
                <el-input style="border: none;"   slot="reference" @click="cronPopover=true" v-model="task.cron" placeholder="请输入cron表达式"></el-input>
              </el-popover>
              <span class="input-group-text btn-success" @click="openAlert">检查表达式</span>
            </div>
            <div class="mb-1 mt-2">
              <label for="comment" style="height: 2rem;">请输入执行脚本：</label>
              <el-menu
                class=""
                mode="horizontal"
                background-color="#0b5ed7"
                text-color="#fff"
                style="display: inline-block;height: 1.5rem;"
                @select="handleSelect"
              >
                <el-submenu index="0">
                  <template slot="title">插入脚本</template>
                  <el-submenu v-for="(item,index) in menus" :key="index" :index="item.name"
                              :disabled="item.children.length==0">
                    <template slot="title"> {{ item.name }}</template>
                    <el-menu-item v-for="child in item.children" :key="child.key"
                                  :index="child.key">{{ child.name }}
                    </el-menu-item>
                  </el-submenu>
                </el-submenu>
              </el-menu>
              <textarea class="form-control " rows="5" id="comment" v-model="task.script" name="script"></textarea>
            </div>
          </div>

          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary" @click="submitData">保存</button>
            <button type="button" class="btn btn-danger" @click="hideDialog">关闭</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-backdrop show" ></div>
  </div>

</template>
<script>
import {cron} from 'vue-cron';
import {AJAX_CONST_MAP,AJAX_CONST_MENUS} from '@/assets/AjaxConst.js'
export default{
  name:"Edit",
  components: { cron },
  data(){
    return {
      cronPopover:false,
      //显示隐藏控制
      isEdit: false,
      task:null,
      menus: AJAX_CONST_MENUS
    };
  },
  methods:{
    changeCron(val){
      this.task.cron=val
    },
    showDialog:function (task){
      this.isEdit=true
      this.task=task
    },
    hideDialog:function (){
      this.isEdit=false
      //重置
      this.task=null
    },
    submitData:function (){
      let that=this;
      fetch("/quartz/modifyScriptTask",{
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.task)
      }).then(res=>res.json()).then(data=>{
        console.log(data)
        if(!data.status){

          alert("修改成功!")
          that.$emit("renderTaskList")
          that.hideDialog()
        }else{
          alert(data.error)
        }
       // console.log(data)

      }).catch(function(e) {
        console.log(e)
       alert(e)
      })

    },openAlert(){
      var that=this
      fetch("/quartz/getScheduleDateList?cron="+this.task.cron).then(res=>res.json()).then(data=>{
        if(data==null||!data.status){
          let txt="校验失败:请检查表达式是否正确"
          let title="CRON 表达式格式错误"
          if(data!=null&&data.length>0){
            title="CRON 表达式校验成功"
            txt="最近10次执行时间:<br>"
            for(let index in data) {
              txt+="<span>"+data[index]+"</span><br>"
            };
          }

          that.$alert(txt, title, {
            confirmButtonText: '确定',
            dangerouslyUseHTMLString: true
          });

        }else{
          alert(data.error)
        }
      })

    },
    InsertString(tbid, str) {
      const tb = document.getElementById(tbid);
      tb.focus();
      if (document.selection) {
        const r = document.selection.createRange();
        document.selection.empty();
        r.text = str;
        r.collapse();
        r.select();
      } else {
        const newstart = tb.selectionStart + str.length;
        this.task.script= tb.value.substr(0, tb.selectionStart) + str + tb.value.substring(tb.selectionEnd);
        tb.selectionStart = newstart;
        tb.selectionEnd = newstart;
      }
    },
    //选择复制值
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      let text = AJAX_CONST_MAP['' + key]
      if (text) {
        //插入脚本
        this.InsertString("comment", text)
      }
    }

  }
};
</script>
